<template>
  <div id="appD">
    <header>
      <div style="font-size: 20px; font-weight: 600;height:100%;margin-top:10px">数据大屏</div>
    </header>
    <div class="dashboard">
      <div style="height: 100%; width: 100%; display: flex">
        <div class="chart-box-left">
          <div class="chart-box">
            <scEcharts height="100%" :option="option"></scEcharts>
          </div>
          <div class="chart-box">
            <scEcharts height="100%" :option="option2"></scEcharts>
          </div>
          <div class="chart-box">
            <scEcharts height="100%" :option="option3"></scEcharts>
          </div>
        </div>
        <div class="chart-box-center">
          <div class="chart-box" style="height: calc(100% - 10px)"></div>
        </div>
        <div class="chart-box-right">
          <div class="chart-box">
            <scEcharts height="100%" :option="option4"></scEcharts>
          </div>
          <div class="chart-box">
            <scEcharts height="100%" :option="option5"></scEcharts>
          </div>
          <div class="chart-box">
            <scEcharts height="100%" :option="option6"></scEcharts>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div>©xxxxx公司</div>
    </footer>
  </div>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
  name: 'BigScreen',
  components: {
    scEcharts,
  },
  data() {
    return {
      baseWidth: 1920,
      baseHeight: 1080,
      option: {
        title: {
          text: 'Bar Demo',
          subtext: '基础柱状图',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          },
        },
        grid: {
          top: '80px',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 14,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 14,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '15px',
          },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'bar',
            barWidth: '15px',
          },
        ],
      },
      option2: {
        title: {
          text: 'Line Demo',
          subtext: '基础折线图',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          },
        },
        grid: {
          top: '80px',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 14,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 14,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
          },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: 'line',
          },
        ],
      },
      option3: {
        title: {
          text: 'Pie Demo',
          subtext: '基础饼图',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '60%'],
            label: false,
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' },
            ],
          },
        ],
      },
      option4: {
        title: {
          text: 'Radar Demo',
          subtext: '基础雷达(属性)图',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'item',
        },
        radar: {
          radius: 100,
          center: ['50%', '55%'],
          indicator: [
            { name: '销售', max: 100 },
            { name: '管理', max: 100 },
            { name: '信息技术', max: 100 },
            { name: '客服', max: 100 },
            { name: '研发', max: 100 },
            { name: '市场', max: 100 },
          ],
        },
        series: [
          {
            name: 'SCUI',
            type: 'radar',
            areaStyle: {},
            data: [
              {
                value: [74, 90, 95, 65, 80, 31],
              },
            ],
          },
        ],
      },
      option5: {
        title: {
          text: 'Kline Demo',
          subtext: '基础K线图',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          },
        },
        grid: {
          top: '80px',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          data: [
            '2017-10-23',
            '2017-10-24',
            '2017-10-25',
            '2017-10-26',
            '2017-10-27',
            '2017-10-28',
            '2017-10-29',
            '2017-10-30',
          ],
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 14,
          },
        },
        yAxis: {
          scale: true,
          axisLabel: {
            show: true,
            color: '#ffffff',
            fontSize: 14,
          },
        },
        series: [
          {
            type: 'k',
            data: [
              [2213.19, 2199.31, 2191.85, 2224.63],
              [2203.89, 2177.91, 2173.86, 2210.58],
              [2170.78, 2174.12, 2161.14, 2179.65],
              [2179.05, 2205.5, 2179.05, 2222.81],
              [2212.5, 2231.17, 2212.5, 2236.07],
              [2227.86, 2235.57, 2219.44, 2240.26],
              [2242.39, 2246.3, 2235.42, 2255.21],
              [2246.96, 2232.97, 2221.38, 2247.86],
            ],
          },
        ],
      },
      option6: {
        color: ['#00ff00', '#ff0000', '#ffff00', '#00ffff'],
        title: {
          text: 'Gauge Demo',
          subtext: '基础仪表盘',
          textStyle: {
            color: '#ffffff',
            fontSize: 14,
          },
        },
        series: [
          {
            axisLabel: {
              show: true,
              color: '#ffffff',
            },
            center: ['50%', '60%'],
            type: 'gauge',
            anchor: {
              show: true,
              showAbove: true,
              size: 20,
              itemStyle: {
                borderWidth: 5,
              },
            },
            progress: {
              show: true,
            },
            data: [
              {
                value: 70,
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    resizeHandler() {
      const windowWidth = document.documentElement.clientWidth;
      const windowHeight = document.documentElement.clientHeight;
      // 分别计算XY轴缩放比例
      const scaleX = windowWidth / this.baseWidth;
      const scaleY = windowHeight / this.baseHeight;
      // 应用独立缩放（可能产生拉伸）
      const app = document.getElementById('appD');
      app.style.transform = `scale(${scaleX}, ${scaleY})`;
    },
  },
  mounted() {
    // 初始化执行
    this.resizeHandler();
    // 防抖监听
    let timeout = null;
    window.addEventListener('resize', () => {
      clearTimeout(timeout);
      timeout = setTimeout(this.resizeHandler, 200);
    });
  },
};
</script>

<style scoped>
#appD {
  transition: all 0.1s ease-in-out;
  width: 1920px;
  height: 1080px;
  position: fixed;
  transform-origin: 0 0;
  background: #001529;
  display: flex;
  flex-direction: column;
}
header {
  background-image: url('../assets/header.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0;
  height: 55px;
  color: #fff;
  text-align: center;
}
footer {
  padding: 15px;
  padding-bottom: 5px;
  color: #fff;
  text-align: center;
}

.dashboard {
  padding: 0 20px;
  color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.chart-box-left {
  height: 100%;
  width: 28%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chart-box-center {
  flex: 1;
  margin: 0 10px;
}
.chart-box-right {
  height: 100%;
  width: 28%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.chart-box {
  width: 100%;
  height: 33%;
  background: #08224f;
  margin-top: 10px;
  border-radius: 8px;
}
</style>
